<template>
	<div class="tool-title-box">
		<h3>文本设置</h3>
		<div class="operation-box">
			<div class="item-box">
				<div class="title">文本内容</div>
				<div class="modify-box w100">
					<el-input type="textarea" placeholder="请输入文本内容" autosize v-model="activeComponent.data.title"></el-input>
				</div>
			</div>
			<div class="item-box flex-style">
				<div class="title">文本高度</div>
				<div class="block">
					<el-slider :show-input-controls="false" input-size="mini" :max="1000" v-model="activeComponent.data.height" show-input></el-slider>
				</div>
			</div>
			<div class="item-box flex-style">
				<div class="title">文本行高</div>
				<div class="block">
					<el-slider :show-input-controls="false" input-size="mini" :min="1" :max="10" :step="0.5" v-model="activeComponent.data.lineHeight" show-input></el-slider>
				</div>
			</div>
			<div class="item-box">
				<div class="title">显示位置</div>
				<div class="info">居{{activeComponent.data.textAlign == 'right' ? '右' : activeComponent.data.textAlign == 'center' ? '中' : '左'}}</div>
				<div class="modify-box">
					<span class="iconfont" :class="{active: activeComponent.data.textAlign === 'left'}" 
						@click="activeComponent.data.textAlign = 'left'">
						<i class="fa fa-align-left" aria-hidden="true"></i>
					</span>
					<span class="iconfont" :class="{active: activeComponent.data.textAlign === 'center'}"
						@click="activeComponent.data.textAlign = 'center'">
						<i class="fa fa-align-center" aria-hidden="true"></i>
					</span>
					<span class="iconfont" :class="{active: activeComponent.data.textAlign === 'right'}"
						@click="activeComponent.data.textAlign = 'right'">
						<i class="fa fa-align-right" aria-hidden="true"></i>
					</span>
				</div>
			</div>
			<div class="item-box">
				<div class="title">标题大小</div>
				<div class="info">{{activeComponent.data.fontSize}}px</div>
				<div class="modify-box">
					<font-size-select v-model:fontSize='activeComponent.data.fontSize'></font-size-select>
				</div>
			</div>
			<div class="item-box">
				<div class="title">标题粗细</div>
				<div class="info" v-text="activeComponent.data.fontWeight === 'bold' ? '加粗' : '常规'"></div>
				<div class="modify-box">
					<span class="iconfont" :class="{active: activeComponent.data.fontWeight === 'normal'}"
						@click="activeComponent.data.fontWeight = 'normal'">
						<i class="fa fa-font" aria-hidden="true"></i>
					</span>
					<span class="iconfont" :class="{active: activeComponent.data.fontWeight === 'bold'}"
						@click="activeComponent.data.fontWeight = 'bold'">
						<i class="fa fa-bold" aria-hidden="true"></i>
					</span>
				</div>
			</div>
			<div class="item-box">
				<div class="title">标题颜色</div>
				<div class="info">{{activeComponent.data.fontColor}}</div>
				<div class="modify-box">
					<div class="color-box">
						<span @click="activeComponent.data.fontColor = '#333333'">重置</span>
						<div class="block">
							<el-color-picker v-model="activeComponent.data.fontColor"></el-color-picker>
						</div>
					</div>
				</div>
			</div>
			<div class="item-box">
				<div class="title">背景颜色</div>
				<div class="info">{{activeComponent.data.bgColor}}</div>
				<div class="modify-box">
					<div class="color-box">
						<span @click="activeComponent.data.bgColor = ''">重置</span>
						<div class="block">
							<el-color-picker v-model="activeComponent.data.bgColor"></el-color-picker>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, computed } from 'vue';
	
	import { useStore } from '/@/store/index';
	import FontSizeSelect from '/@/views/decorator/components/toolBar/module/font-size-select.vue';
	
	export default {
		name: 'text-tool',
		components: {
			FontSizeSelect
		},
		setup() {
			const store = useStore();
			const state = reactive({
				
			})
			state.terminal = computed(() => store.state.decorator.terminal);
			state.activeComponent = computed(() => store.state.decorator.activeComponent);
			
			return {
				...toRefs(state),
			};
		},
	}
</script>

<style lang="scss" scoped>
@import './scss/index.scss';
</style>
